import React from 'react';
import { useForm } from 'react-hook-form';
import styles from './styles.module.css';

interface LoginFormData {
  adminName: string;
  password: string;
  rememberMe: boolean;
}

interface LoginFormProps {
  onSubmit: (data: LoginFormData) => void;
  isLoading?: boolean;
}

const LoginForm: React.FC<LoginFormProps> = ({ onSubmit, isLoading = false }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>();

  return (
    <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
      <div className={styles.formGroup}>
        <label htmlFor="adminName" className={styles.label}>
          用户名
        </label>
        <input
          id="adminName"
          type="text"
          {...register('adminName', { required: '请输入用户名或邮箱' })}
          className={styles.input}
          disabled={isLoading}
        />
        {errors.adminName && (
          <span className={styles.error}>{errors.adminName.message}</span>
        )}
      </div>

      <div className={styles.formGroup}>
        <label htmlFor="password" className={styles.label}>
          密码
        </label>
        <input
          id="password"
          type="password"
          {...register('password', { required: '请输入密码' })}
          className={styles.input}
          disabled={isLoading}
        />
        {errors.password && (
          <span className={styles.error}>{errors.password.message}</span>
        )}
      </div>

      {/* <div className={styles.formGroup}>
        <label className={styles.checkboxLabel}>
          <input
            type="checkbox"
            {...register('rememberMe')}
            className={styles.checkbox}
            disabled={isLoading}
          />
          记住我
        </label>
      </div> */}

      <button
        type="submit"
        className={styles.submitButton}
        disabled={isLoading}
      >
        {isLoading ? '登录中...' : '登录'}
      </button>
    </form>
  );
};

export default LoginForm; 